<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05class绑定</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #ff0000;
        }

        .div2 {
            color: #ff0000;
        }

    </style>
</head>

<body>
    <h2>class绑定</h2>
    <main id="app">
        <div class="div1 div2">我是一个div1</div>
        <div :class="class1">我是一个div2</div>
        <p>绑定多个class，方法1：拼字符串</p>
        <div :class="class1 + ' ' + class2">我是一个div3</div>
        <p>绑定多个class，方法2：使用数组对象</p>
        <div :class="classArr">我是一个div3</div>
        <p>绑定多个class，方法3：使用对象</p>
        <div :class="classObj">我是一个div3</div>
    </main>
    <h2>绑定单个class</h2>
    <ul>
        <li>直接绑定class值的字符串值即可。</li>
    </ul>
    <h2>绑定多个class</h2>
    <ul>
        <li>最笨的办法：拼字符串</li>
        <li>方法2：使用数组，数组成员是class值的字符串值</li>
        <li>方法3：重点掌握，使用对象。对象属性为class值，对象属性值为true/false，当为true的时候，有该属性名的class值</li>
    </ul>
</body>
<script src="../vue.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            class1: "div1",
            class2: "div2",
            classArr: ['div1','div2'],
            classObj: {
                div1: true,
                div2: true
            }
        },
    })

    
</script>

</html>